<template>
	<view :style="{ minHeight: sys.windowHeight + 'px' }"
		:class="[$tm.vx.state().tmVuetify.black ? 'black maina' : 'grey text maina']">
		<view>
			<tm-menubars color="primary" title="记账详情" :shadow="0">
			</tm-menubars>
			<view>
				<view class="fixed fulled  overflow" style="z-index: 8;" v-if="resh">
					<tm-tabs :fllowTheme="false" bg-color="orange" color="yellow" @change="change" v-model="activeIndex"
						:list="list" range-key="title"></tm-tabs>
					<tm-pullBottom :height="heightHome" :loading.sync="loading" @refresh="getdata">
						<tm-switchList color="blue" :rightLabel="'￥'+item.value" :icon="loadTypeIcon(item)" :on='false'
							@actionsClick="((e)=>{action(e, item)})" :title="loadTypeName(item)"
							@click="viewRemarks(item)" v-for="(item,index) in data" :label="item.time+' '+item.bname" :key="index"
							:actions="item.share? item: item_1" :rightIcon="item.share?'icon-share1':''">
						</tm-switchList>
					</tm-pullBottom>
					<tm-poup v-model="showremark" position="bottom" height="300">
						<tm-sheet color="blue text" :shadow="24">
							<view class="text-size-s text-weight-b mb-24">
								<text>
									备注: {{ remarks }}
								</text>
							</view>
						</tm-sheet>
					</tm-poup>
				</view>
				<view :class="[$tm.vx.state().tmVuetify.black ? 'black' : $tm.vx.state().tmVuetify.color || 'primary']">
					<view class=" py-32" style=""
						:class="[$tm.vx.state().tmVuetify.black ? 'grey-darken-5 bk' : $tm.vx.state().tmVuetify.color || 'primary']">
						<view class="text-size-s text-align-center text-white">
							<text>{{ time }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// https://roundicons.com/icon-packs/free-christmas-icons/
	import tmMenubars from '@/tm-vuetify/components/tm-menubars/tm-menubars.vue';
	import tmTabs from "@/tm-vuetify/components/tm-tabs/tm-tabs.vue"
	import tmSwitchList from '@/tm-vuetify/components/tm-switchList/tm-switchList.vue';
	import tmPullBottom from "@/tm-vuetify/components/tm-pullBottom/tm-pullBottom.vue"
	import tmPoup from "@/tm-vuetify/components/tm-poup/tm-poup.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	export default {
		components: {
			tmTabs,
			tmMenubars,
			tmSwitchList,
			tmPullBottom,
			tmPoup,
			tmSheet
		},
		data() {
			return {
				item_2: [],
				item_1: [{
						text: "编辑",
						width: 140,
						color: 'black'
					},
					{
						text: "删除",
						width: 110,
						color: 'red'
					},
				],
				resh: false,
				loading: false,
				opens: false,
				time: '',
				list: ['支出', '收入'],
				activeIndex: 0,
				show: true,
				word: '',
				type: {},
				data: [],
				er: 0,
				heightHome: 1200,
				fliter: {
					pageNo: 1,
					pageSize: 15
				},
				types: [],
				books: [],
				showremark: false,
				remarks: '',
				total: 0
			};
		},
		created() {
			this.sys = uni.getSystemInfoSync();
			// #ifdef H5
			this.bottom = 55
			// #endif
			this.loadH();

		},
		onLoad() {
			// #ifdef MP
			this.top = uni.upx2px(150);
			// #endif

		},
		onShow() {
			this.resh = false;
			this.loadType();
			this.loadBook();
			this.getdata('pull');
			this.opens = false
		},
		mounted() {
			this.resh = false;
			this.loadType();
			this.loadBook();
			this.getdata('pull');
		},
		methods: {
			action(e, item) {
				this.opens = false
				if (e.index == 0) {
					// uni.navigateTo({
					//     url:'/pages/index/index?id='+item.id
					// });
					uni.setStorageSync('billId', item);
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else {
					let that = this;
					uni.showModal({
						title: '提示',
						content: '确定删除该账单',
						success: function(res) {
							if (res.confirm) {
								that.$ajax.get('/bill/delete/' + item.id).then(res => {
									that.getdata()
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			loadH() {
				let that = this
				uni.getSystemInfo({
					success: function(res) { // res - 各种参数
						console.log(res.windowHeight); // 屏幕的宽度
						let info = uni.createSelectorQuery().select(".maina"); // 获取某个元素
						info.boundingClientRect(function(data) { //data - 各种参数
							console.log(data.height) // 获取元素宽度
							let view = (res.windowHeight - data.height) * 2
							that.heightHome = 1200
						}).exec()
					}
				});
			},
			loadTypeName(val) {
				let t = '未知明细';
				this.types.forEach(i => {
					if (i.id == val.type) {
						t = i.text;
					}
				})
				return t;
			},
			loadBookName(val) {
				let t = val.time;
				for (let i = 0; i < this.books.length; i++) {
					if (this.books[i].id == val.bid) {
						t = t + '	' + this.books[i].name;
						break;
					}
				}
				return t;
			},
			loadTypeIcon(val) {
				let t = '';
				this.types.forEach(i => {
					if (i.id == val.type) {
						t = i.icon;;
					}
				})
				if (t == '') {
					t = 'icon-gem'
				}
				return t;

			},
			getdata(e) {
				if (e == 'pull') {
					this.fliter.pageNo = 1;
					this.loadList();
				} else if (e == 'bottom') {
					if (this.total > this.data.length) {
						this.fliter.pageNo = this.fliter.pageNo + 1;
						this.loadListN()
					} else {
						this.loading = false;
						uni.$tm.toast('已经是全部了');
					}
				} else {
					this.loadList();
				}
			},
			loadList() {
				this.judgeLogin(res => {
					this.$ajax.post("/bill/list", {
						uid: res.id,
						er: this.er,
						pageNumber: this.fliter.pageNo,
						pageSize: this.fliter.pageSize
					}).then(res => {
						this.data = res.data.records
						this.total = res.data.total
						this.loading = false;
						this.resh = true;
					})
				})
			},
			loadListN() {
				this.judgeLogin(res => {
					this.$ajax.post("/bill/list", {
						uid: res.id,
						er: this.er,
						pageNumber: this.fliter.pageNo,
						pageSize: this.fliter.pageSize
					}).then(res => {
						this.data = this.data.concat(res.data.records)
						this.total = res.data.total
						this.loading = false;
						this.resh = true;
					})
				})
			},
			loadType() {
				this.$ajax.get('/type/load/' + this.er).then(res => {
					this.types = res.data
				})
			},
			loadBook() {
				this.judgeLogin(res => {
					this.$ajax.post('/book/list', {
						uid: res.id
					}).then(res => {
						this.books = res.data
					})
				})

			},
			selectType(e) {
				this.type = e.data
			},
			closeKey() {
				this.show = false;
			},
			open() {
				this.show = true;
			},
			selectTime(e) {
				this.time = e.year + "/" + e.month + "/" + e.day
			},
			getCurrentTime() {
				//获取当前时间并打印
				let yy = new Date().getFullYear();
				let mm = new Date().getMonth() + 1;
				let dd = new Date().getDate();
				let hh = new Date().getHours();
				let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
				let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
				this.time = yy + '/' + mm + '/' + dd;
			},
			change(e) {
				this.word = ''
				this.type = {}
				this.er = e
				this.fliter.pageNo = 1;
				this.loadType();
				this.loadList();
			},
			viewRemarks(item) {
				this.showremark = true;
				if (null != item.remarks && undefined != item.remarks) {
					this.remarks = item.remarks;
				} else {
					this.remarks = ''
				}
			},
			confirm(val) {
				this.show = true;
				this.judgeLogin(() => {
					this.$ajax.post('/bill/save', {
						type: this.type.id,
						er: this.er,
						value: val,
						uid: this.$store.state.userInfo.id,
						time: this.time
					}).then(res => {
						this.word = ''
						this.type = {}
					})
				});

			}
		}
	};
</script>

<style lang="scss">
	page,
	body {
		min-height: 100%;
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped></style>
